<template>
	<view class="">
		<!-- 头部标题 -->
		<view class="cu-bar bg-white">
			<view class="action sub-title">
				<text class="text-xl text-bold text-green">创建课堂</text>
				<text class="bg-green" ></text>
			</view>
		</view>
		<!-- 头部标题 end -->
		
		
		<!-- 内容区域 -->
		<view class="" style="width: 100%;">
			
			<view v-if="!qrcodeStatic" class="bg-white image" style="width: 100%;padding: 20upx;display: flex;justify-content: center;align-items: center;">
				<image src="../../../static/logo.png" style="height: 300upx;width: 300upx;"></image>
			</view>
			
			<view v-if="qrcodeStatic"  class=" bg-white" style="display: flex;justify-content: center;">
				<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
			</view>
			
			<view class="cu-form-group margin-top">
				<view class="title">课堂名称:</view>
				<input placeholder="我的大学课堂" v-model="className"></input>
			</view>
			
			<view class="cu-form-group ">
				<view class="title">教师姓名:</view>
				<input placeholder="教师姓名" v-model="teacherName"></input>
			</view>
			
			<view class="cu-form-group ">
				<view class="title">班级:</view>
				<input placeholder="我的班级" v-model="classRoom"></input>
			</view>
			
			
			<view class="padding-xl">
				<button  @click.native="make()" class="cu-btn block bg-gradual-green margin-tb-sm lg">
					<text :class="  statusButton ? 'cuIconfont-spin cuIcon-loading2' : 'cuIconfont-spin' "></text> {{statusButton ? '生成中...' : '创建'}}
					</button>
			</view>
			
		</view>
		<!-- end -->
		
		
	</view>
</template>

<script>
	var _this;
	import uQRCode from '../../../common/uqrcode.js'
	export default{
		data(){
			return{
				qrcodeStatic:false,//二维码显示状态
				qrcodeText: 'uQRCode',//二维码 内容
				qrcodeSize: 200,//二维码大小
				className:'',//课堂名称
				teacherName:'',//教师姓名
				classRoom:'',//我的班级
				statusButton:false//按钮状态(是否正在提交中...)
			}
		},
		methods:{
			make() {
				
				if(_this.statusButton){
					return;
				}
				
				var className = _this.className;//课堂名称
				var teacherName = _this.teacherName;//教师姓名
				var classRoom = _this.classRoom;//班级
				
				if(className == null || className == ""){
						uni.showToast({
							title:"请输入课堂名称！",
							icon:"none",
							duration:1000
						})
						return;
				}
				
				if(teacherName == null || teacherName == ""){
						uni.showToast({
							title:"请输入教师姓名！",
							icon:"none",
							duration:1000
						})
						return;
				}
				
				if(classRoom == null || classRoom == ""){
						uni.showToast({
							title:"请输入班级！",
							icon:"none",
							duration:1000
						})
						return;
				}
				
				_this.statusButton = true;//开启上传状态
				
				// 获取教师用户名称
			var user_info = uni.getStorageSync("user_info");
				
				// 创建课堂
				uni.request({
					url:_this.api  + "clazz/create",
					method:"POST",
					header:{
						 "content-type":"application/x-www-form-urlencoded"
					},
					data:{
						uid:user_info.id,
						uname:teacherName,
						clazz:className,
						clazzName:classRoom
					},
					success: (res) => {
						
						if(res.data.code == 200){
							console.log(res.data)
							// var arr = {};
							// arr['clazzId'] = res.data.data.id;//课堂id
							// arr['clazz'] = res.data.data.clazz;//课堂名称
							// arr['banji'] = res.data.data.banji;//班级名称  banji
							// arr['banji'] = uni.getStorageSync("user_info").userName;//老师名称 tname
							var rel =  '{"clazzId":'+ `"${res.data.data.id}"` + ',"clazz":'+ `"${res.data.data.clazz}"` +',"tname":'+ `"${res.data.data.uname}"` + ',"banji":'+ `"${res.data.data.clazzName}"` + '}';
							console.log(rel);
							//生成二维码
							this.qrcodeStatic = true;
							uQRCode.make({
								canvasId: 'qrcode',
								text: this.qrcodeText = rel ,
								size: this.qrcodeSize,
								margin: 10,
								success: res => {
									this.qrcodeSrc = res
								},
								complete: () => {
									_this.statusButton = false;//成功隐藏状态
								}
							})
							
						}else{
							uni.showToast({
								title:"创建失败！请稍后在试~！",
								icon:"none",
								duration:1000
							})
						}
						
					},
					fail: (err) => {
						uni.showToast({
							title:"创建课堂失败！请稍后尝试",
							icon:"none",
							duration:1000
						})
					}
				})
			
			
			},
			
		},
		onLoad(options) {
			_this = this;
		}
	}
</script>

<style>
	
</style>
